<template>
  <div class="app">
    <div class="left">
      <RegionBar :data="data.region_data"/>
      <RadarBar :data="data.radar_data"/>
      <RegionBar :data="data.region_data"/>
    </div>
    <div class="center" style="color: #fff;">
      <MapChart :data="data.map_data"/>
    </div>
    <div class="right">
      <ServiceBar :data="data.region_data"/>
      <ServiceBar :data="data.region_data"/>
      <ServiceBar :data="data.region_data"/>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import request from '@/utils/request'
  import RegionBar from '@/components/RegionBar.vue';
  import ServiceBar from '@/components/ServiceBar.vue';
  import RadarBar from '@/components/RadarBar.vue';
  import MapChart from '@/components/MapChart.vue';
  
  const data = ref<any>({})
  const getData = () => {
    request.get('/').then(res => {
      if (data.value.map_data) {
         // 数据我是api.py mock的，但是地图数据本身就有多个年份了，所以保留第一次从接口获取的数据
        res.data.map_data = data.value.map_data
      }
      data.value = res.data
    })
  }
  getData()
  setInterval(getData, 3000)
</script>

<style scoped>
  .app {
    height: 100%;
    display: flex;
    background-color: #071638;
    box-sizing: border-box;
    padding: 8px;
  }
  .app>div {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.1);
  }
  .left, .right {
    flex: 1;
  }
  .left {
    margin-right: 8px;
  }
  .right {
    margin-left: 8px;
  }
  .center {
    width: 50%;
  }
</style>